<!--
* @fileName content-table.vue
* @author caoke
* @date 2023/03/31 21:29:50
* @version V1.0.0
* @description 
!-->
<template>
  <div>
    <el-table :data="tableData">
      <el-table-column type="selection" align="center" width="60px"></el-table-column>
      <!-- type="index" 自动编号 序号 -->
      <el-table-column type="index" label="序号" align="center" width="60px"></el-table-column>
      <template v-for="(i,index) in tableInfo.columns">
        <el-table-column :label="i.title" :prop="i.key" :width="i.width" align="center" :key="index" :show-overflow-tooltip="showOverflowTooltip(i)">
          <template slot-scope="scope">
            <el-input v-show="doubleclick==index" type="text" placeholder="请输入地址" v-model="scope.row[i.key]" size="mini" prefix-icon="el-icon-edit" clearable>
            </el-input>
            <span v-show="doubleclick!=index">{{scope.row[i.key]}}</span>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
import tmp from "./temple-data.json";
export default {
  name: "",
  props: {
    // 就近原则
    tableInfo: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      loading: false,
      tableData: [],
      doubleclick: null, // 记录当前编辑行序号
    };
  },
  computed:{

  },
  created() {},
  methods: {
    setValue(val) {
      this.tableData = val;
    },
    getValue() {
      return this.tableData;
    },
    getListData() {
      console.log("加载列表", this.tableInfo, this.columns);
      let res = tmp;
      this.setValue(res.data.records);
    },
    showOverflowTooltip(i){
        let check =false
        if(i.showOverflowTooltip === true ||i.showOverflowTooltip === false){
            return i.showOverflowTooltip
        }
        if(this.tableInfo.showOverflowTooltip === true ||this.tableInfo.showOverflowTooltip === false){
            return this.tableInfo.showOverflowTooltip
        }
        // 就近原则
        return check
    }
  },
};
</script>
<style lang='scss' scoped>
</style>